<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;   /*去除html元素默认的外边距  body默认8px margin*/
        }
        .box1,.box2 {
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: #FFA500;
            margin: 25px  15px  10px 5px;
        }
        .box2{
            margin-top: 15px;
            margin-left: 50px;
            background-color:green;
            /*border: 2px solid red;*/
        }
    </style>
</head>
<body>
<!--
    盒模型
    所有HTML元素可以看作盒子,盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
    Margin(外边距) - 清除边框外的区域，外边距是透明的。
            margin-left: 25px;
            margin-top: 25px;
            margin-bottom: 15px;
            margin-right: 25px;

       外边距设置时 可以单独设置每个位置的值  也可以使用以下简写形式
        margin
              一个参数   25px             top+right+bottom+left
              两个参数  25px  15px        top+bottom    right+left
              三个参数  25px  15px  10px   top    right+left     bottom
              四个参数  25px 15px  10px  5px   top right   bottom   left

            margin属性可以有一到四个值。

            margin:25px 50px 75px 100px;
            上边距为25px
            右边距为50px
            下边距为75px
            左边距为100px

            margin:25px 50px 75px;
            上边距为25px
            左右边距为50px
            下边距为75px

            margin:25px 50px;
            上下边距为25px
            左右边距为50px

            margin:25px;
            所有的4个边距都是25px
    Border(边框) - 围绕在内边距和内容外的边框。
    Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    Content(内容) - 盒子的内容，显示文本和图像
-->

<div class="box1">
    盒子模型1
</div>

<div class="box2">
    盒子模型2
</div>

</body>
</html>